@import "./themes/basic-light-theme";
@import "./themes/basic-dark-theme";
@import "./typography";

@mixin _patch-html-and-body($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    background-color: gd-color($background, background);

    body {
        background-color: gd-color($background, background);
        color: gd-color($foreground, text);
    }
}

@mixin scrollbar($theme) {
    ::-webkit-scrollbar {
        $background: map-get($theme, background);

        right: 0;
        top: 0;
        bottom: 0;

        position: absolute;
        background-color: gd-color($background, background-highlight);
        width: 10px;
        height: 10px;
        content: " ";
    }

    /* background of the scrollbar except button or resizer */
    ::-webkit-scrollbar-track {
        $background: map-get($theme, background);

        background-color: gd-color($background, background-highlight);
    }

    /* scrollbar itself */
    ::-webkit-scrollbar-thumb {
        $foreground: map-get($theme, foreground);

        background-color: gd-color($foreground, divider);
    }

    /* set button(top and bottom of the scrollbar) */
    ::-webkit-scrollbar-button {
        display:none;
    }
}

@mixin ui-core() {
    *, *:before, *:after {
        box-sizing: border-box;
    }

    html {
        // NB This seems to be necessary on macOS (and possibly others)
        // for the absolutely positioned foldout to fill the window
        // when it's being resized.
        position: relative;
    }

    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    body {
        font-family: $font-family-sans-serif;
        font-size: $font-size;
        font-weight: $font-weight-normal;
        line-height: $line-height;
    }

    input, select, option, blockquote, textarea {
        font-family: $font-family-sans-serif;
    }

    code {
        font-family: $font-family-monospace;
    }

    :not(input):not(textarea) {
        user-select: none;
        cursor: default;
    }

    img {
        -webkit-user-drag: none;
        user-select: none;
        pointer-events: none;
    }

    .BasicLightTheme {
        @include _patch-html-and-body($basic-light-theme);
        @include scrollbar($basic-light-theme);
    }

    .BasicDarkTheme {
        @include _patch-html-and-body($basic-dark-theme);
        @include scrollbar($basic-dark-theme);
    }
}
